<template>
  <div class="tool-wrap">
    <ul>
      <li>
        <span style="margin-right: 8px"
          ><i class="el-icon-location-outline"></i> 当前位置</span
        >
        <el-select
          v-model="value"
          placeholder="全州"
          :change="handleSelectValue(value)"
        >
          <el-option
            v-for="item in locations"
            :key="item.value"
            :value="item.value"
          >
            <span style="float: left">{{ item.label }}</span>
            <!--<span style="float: right;color: var(&#45;&#45;el-text-color-secondary);font-size: 13px;"-->
            <!--&gt;{{ item.value }}</span>-->
          </el-option>
        </el-select>
      </li>
      <el-divider direction="vertical"></el-divider>
      <li>
        <span @click="handleFullMap()">全图</span>
      </li>
      <el-divider direction="vertical"></el-divider>
      <li>
        <el-dropdown @command="handleAttributeQuery">
          <span class="el-dropdown-link">
            <i class="el-icon-search"></i>
            查询 <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>属性查询</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </li>
      <el-divider direction="vertical"></el-divider>
      <li>
        <el-dropdown @command="handleScreenView">
          <span class="el-dropdown-link">
            对比 <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="normal">普通对比</el-dropdown-item>
              <el-dropdown-item command="roller">卷帘对比</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </li>
      <el-divider direction="vertical"></el-divider>
      <li>
        <!-- <span><i class="el-icon-collection-tag"></i> 书签</span> -->
        <el-popover
          placement="bottom"
          :width="280"
          title="视角书签"
          trigger="click"
        >
          <template #reference>
            <span><i class="el-icon-collection-tag"></i> 书签</span>
          </template>
          <el-form
            :inline="true"
            ref="bookmarkFormRef"
            class="demo-form-inline"
          >
            <el-form-item>
              <el-input
                v-model="name"
                size="mini"
                placeholder="请输入书签名称"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit" size="mini"
                ><el-icon><Plus /></el-icon>添加</el-button
              >
            </el-form-item>
          </el-form>
          <ul
            v-infinite-scroll="loadbookmark"
            class="infinite-list"
            style="overflow: auto"
          >
            <li
              v-for="item in bookmarkList"
              :key="item"
              class="infinite-list-item"
              @click="bookmarkClick(item)"
            >
              <el-row :gutter="20">
                <el-col
                  :span="16"
                  style="font-size: 16px; vertical-align: middle"
                  ><el-icon :size="16"><Flag /></el-icon>{{ item.name }}</el-col
                >
                <el-col :span="8" style="text-align: right"
                  ><el-icon @click="deleteBookmark(item.Id, $event)" :size="16"
                    ><Delete /></el-icon
                ></el-col>
              </el-row>
            </li>
          </ul>
        </el-popover>
      </li>
      <li>
        <el-dropdown>
          <span class="el-dropdown-link">
            <i class="el-icon-setting"></i>
            工具 <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="handleMeasure('measureDistance')"
                >测距</el-dropdown-item
              >
              <el-dropdown-item @click="handleMeasure('measureArea')"
                >测面</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </li>
      <li @click="handleFullScreen()" id="fullscreen">
        <i class="el-icon-full-screen"></i> 全屏
      </li>
      <li @click="handleClearGraphics()">
        <i class="el-icon-delete"></i> 清除
      </li>
      <!-- <li><i class="el-icon-upload2"></i> 导入</li> -->
    </ul>
  </div>
</template>

<script lang="ts">
import {
  addNewBookmark,
  bookmarkLocate,
  deleteBookmarkById,
  getBookmarkList,
} from "@/views/yizhangtu/func/bookmark";
import { Delete, Flag, Plus } from "@element-plus/icons";
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  ref,
  toRefs,
} from "vue";
import { useStore } from "vuex";
interface DataProps {
  userid: string;
  bookmarkVisible: boolean;
  currBookmark: any;
  name: string;
  remark: string;
  onSubmit: () => void;
  loadbookmark: () => void;
  deleteBookmark: (id: string, event: any) => void;
  bookmarkClick: (item: any) => void;
}
export default defineComponent({
  name: "ToolBar",
  components: { Plus, Flag, Delete },
  setup(props, ctx) {
    let store = useStore();
    let locations = [
      {
        areaCode: "6528",
        value: "全州",
        label: "全州",
        lat: "86.1",
        lng: "41.5",
      },
      {
        areaCode: "652801",
        value: "库尔勒市",
        label: "库尔勒市",
        lat: "86.1",
        lng: "41.5",
      },
      {
        areaCode: "652822",
        value: "轮台县",
        label: "轮台县",
        lat: "123.1",
        lng: "41.5",
      },
      {
        areaCode: "652823",
        value: "尉犁县",
        label: "尉犁县",
        lat: "111.1",
        lng: "41.5",
      },
      {
        areaCode: "652824",
        value: "若羌县",
        label: "若羌县",
        lat: "160.1",
        lng: "41.5",
      },
      {
        areaCode: "652825",
        value: "且末县",
        label: "且末县",
        lat: "134.1",
        lng: "41.5",
      },
      {
        areaCode: "652826",
        value: "焉耆回族自治县",
        label: "焉耆回族自治县",
        lat: "173.1",
        lng: "41.5",
      },
      {
        areaCode: "652827",
        value: "和静县",
        label: "和静县",
        lat: "144.1",
        lng: "41.5",
      },
      {
        areaCode: "652828",
        value: "和硕县",
        label: "和硕县",
        lat: "199.1",
        lng: "41.5",
      },
      {
        areaCode: "652829",
        value: "博湖县",
        label: "博湖县",
        lat: "230.1",
        lng: "41.5",
      },
      // {
      //   areaCode: "652871",
      //   value: "库尔勒经济技术开发区",
      //   label: "库尔勒经济技术开发区",
      //   lat: "230.1",
      //   lng: "41.5",
      // },
    ];
    let value = ref("");
    //书签相关内容
    const bookmarkForm: DataProps = reactive({
      userid: store.state.user.userInfo.id,
      bookmarkVisible: true,
      currBookmark: null,
      name: "",
      remark: "",
      onSubmit() {
        let values = { userid: bookmarkForm.userid, name: bookmarkForm.name };
        addNewBookmark(values);
        bookmarkForm.name = "";
      },
      loadbookmark() {},
      bookmarkClick(item: any) {
        bookmarkLocate(item);
      },
      deleteBookmark(id: string, event: any) {
        //阻止事件冒泡
        event.stopPropagation();

        deleteBookmarkById(id, store.state.user.userInfo.id);
      },
    });
    // data.currBookmark = inject('currBookmark') as any;
    const bookmarkList = computed(() => {
      return store.state.bookmark.bookmarkList;
    });
    const handleSelectValue = (data: any) => {
      const x = locations.find((location) => location.value == data);
      if (x) {
        const locationHandle = {
          areaCode: x.areaCode,
          type: "locationHandle",
        };
        ctx.emit("handle", locationHandle);
      }
    };

    const handleFullMap = () => {
      const locationHandle = { type: "mapFullView" };
      ctx.emit("handle", locationHandle);
    };

    const handleAttributeQuery = () => {
      let _selectedLayerList = store.state.layers.layerList;
      const attributeQuery = {
        layerList: _selectedLayerList,
        type: "attributeQuery",
      };
      handleClearGraphics();
      ctx.emit("handle", attributeQuery);
    };

    const handleScreenView = (command: any) => {
      const screenView = { type: "screenView", command: command };
      ctx.emit("handle", screenView);
    };

    const handleFullScreen = () => {
      const locationHandle = { type: "mapFullScreen" };
      ctx.emit("handle", locationHandle);
    };

    const handleClearGraphics = () => {
      const clearHandle = { type: "mapClear" };
      ctx.emit("handle", clearHandle);
    };
    const handleMeasure = (optName: string) => {
      const measureHandle = { type: "measure", name: optName };
      ctx.emit("handle", measureHandle);
    };
    onMounted(() => {
      getBookmarkList(store.state.user.userInfo.id);
    });
    return {
      locations,
      value,
      handleSelectValue,
      handleFullMap,
      handleAttributeQuery,
      handleScreenView,
      handleFullScreen,
      handleClearGraphics,
      handleMeasure,
      ...toRefs(bookmarkForm),
      bookmarkList,
    };
  },
});
</script>

<style lang="less" scoped>
.tool-wrap {
  background: #ffffff;
  padding: 0px 5px;
  text-align: right;
  ul,
  li {
    margin: 0;
    padding: 0;
  }
  li {
    display: inline-block;
    cursor: pointer;
    padding: 0 8px;
  }
}
.infinite-list {
  max-height: 300px;
  padding: 0;
  margin: 0;
  list-style: none;
  .infinite-list-item {
    width: 90%;
    margin-left: 10px;
    border-bottom: 1px solid #ccc;
    padding: 5px 0px;
    &:hover {
      cursor: pointer;
    }
  }
  // .infinite-list-item {
  //   // width: 100%;
  //   display: flex;
  //   // align-items: baseline;
  //   border-bottom: 1px solid #ccc;
  //   // justify-content: end;
  //   //   height: 30px;
  //   //   margin: 10px;
  //   //   & + .list-item {
  //   //     margin-top: 10px;
  //   //   }
  // }
}
</style>
